import React from "react";
import "./index.scss";
import classnames from "classnames";

function Panel(props) {
  const { isHeader = false, className = "", noPadding = false } = props;
  return (
    <div
      className={classnames({
        "zz-panel": true,
        "zz-panel-header": isHeader,
        "zz-panel-nopadding": noPadding,
        [className]: className != "",
      })}
    >
      {props.children}
    </div>
  );
}

function PanelHead(props) {
  const { className, children, hasBorder = false } = props;

  return (
    <div
      className={classnames({
        "zz-panel-head": true,
        [className]: !!className,
        "panel-head-border": hasBorder,
      })}
    >
      {children}
    </div>
  );
}
function PanelBody(props) {
  const { className, children } = props;

  return (
    <div className={className ? `zz-panel-body ${className}` : "zz-panel-body"}>
      {children}
    </div>
  );
}

Panel.Head = PanelHead;
Panel.Body = PanelBody;

export default Panel;
